Skip to main content

Measurements

Pro Feature

Upgrade to Phoenix Code Pro to access this feature.

The Measurements feature displays ruler lines extending from the edges of a selected element to the edges of the Live Preview document, with labels showing exact pixel positions. This helps you position elements more accurately.

Measurements

Ruler lines appear in blue for editable elements and gray for non-editable (dynamically created) elements.

Enabling Measurements

While in Edit Mode, click the dropdown arrow next to the pen icon in the Live Preview toolbar. This opens a menu where you can toggle Show Measurements on or off.

By default, measurements are disabled.

Enable Show Measurements

Alternatively, you can enable measurements from the More Options menu (three-dots icon) in the Control Box. Select Show Measurements to toggle it on or off.

You can also change this setting by updating the livePreviewShowMeasurements preference in the preferences file. Set it to true or false (default).
See Editing Preferences to learn how to edit the preferences file.